<template>
  <div class="background">
    <div class="blog-content-box">
      <div class="article-header-box">
        <div class="article-header">
          <div class="article-title-box">
            <h1>【{{ topicInfo.title }}】</h1>
          </div>
          <div class="article-info-box">
            <div class="article-bar-top">
              <img
                src="../assets/img/original.png"
                class="article-type-img"
                alt=""
              />
            </div>
            <div class="bar-content">
              <span
                class="follow-nickName"
                v-if="topicInfo.user"
                @click="toUserHome(topicInfo.author_id)"
                >{{ topicInfo.user.username }}</span
              >
              <span class="time">{{ topicInfo.created_time }}</span>
              <i class="article-read-img el-icon-view" alt="" />
              <span class="time read-count">{{ topicInfo.views }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="baidu_pl">
        <div class="topic">留言内容</div>
        <div class="content">
          <div v-html="topicInfo.content"></div>
        </div>
      </div>
    </div>

    <div class="comment-box">
      <div class="comment-title">
        评论<span>{{ commentsNum }}</span>
      </div>
      <div class="comment-edit-box">
        <div class="user-img" @click="toUserHome($store.state.user_id)">
          <img
            :src="$url + $store.state.avatar_url"
            v-if="$store.state.avatar_url"
            alt=""
          />
        </div>
        <div class="commentInput">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="commentInfo"
            :rows="4"
          >
          </el-input>
          <el-button
            class="commentBtn"
            type="primary"
            round
            size="mini"
            @click="postComment"
            :disabled="commentInfo == ''"
            >评论</el-button
          >
        </div>
      </div>
      <div class="comment-list-box">
        <div class="listBox" v-for="comment in comments" :key="comment.id">
          <div class="comment-list-item">
            <div class="img_box" @click="toUserHome(comment.user.user_id)">
              <img :src="$url + comment.user.avatar_url" alt="" />
            </div>
            <div class="right_box">
              <div class="new-info-box">
                <div class="comment_top">
                  <span>{{ comment.fromuser }}</span>
                </div>
                <div class="comment-center">
                  <div class="new-comment">{{ comment.content }}</div>
                </div>
                <div class="opt-comment">
                  <span
                    style="cursor: pointer"
                    @click="letInputShow(comment)"
                    >{{ comment.isInputShow ? '收起' : '回复' }}</span
                  >
                  <span style="color: #777888">{{ comment.created_time }}</span>
                </div>
                <div class="commentInput" v-if="comment.isInputShow">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    :placeholder="'回复' + comment.fromuser"
                    v-model="comment.inputComment"
                    :rows="4"
                  >
                  </el-input>
                  <el-button
                    class="commentBtn"
                    type="primary"
                    round
                    size="mini"
                    :disabled="comment.inputComment == ''"
                    @click="answerComment({ comment })"
                    >评论</el-button
                  >
                </div>
              </div>
            </div>
            <div
              class="deleteC"
              v-if="$store.state.user_level >= comment.user.user_level"
            >
              <el-popconfirm
                title="确定删除吗？"
                @confirm="deleteComment({ comment })"
              >
                <i class="el-icon-circle-close" slot="reference"></i>
              </el-popconfirm>
            </div>
          </div>
          <div
            class="replay-box"
            v-for="replay in comment.Comments.slice(0, comment.showNum)"
            :key="replay.id"
          >
            <div class="comment-list-item">
              <div class="img_box" @click="toUserHome(replay.user.user_id)">
                <img :src="$url + replay.user.avatar_url" alt="" />
              </div>
              <div class="right_box">
                <div class="new-info-box">
                  <div class="comment_top">
                    <div class="user-box">
                      <span class="username">{{ replay.fromuser }}</span>
                      <span class="text">回复</span>
                      <span class="nickName">{{ replay.touser }}</span>
                    </div>
                  </div>
                  <div class="comment-center">
                    <div class="new-comment">{{ replay.content }}</div>
                  </div>
                  <div class="opt-comment">
                    <span
                      style="cursor: pointer"
                      @click="letInputShow(replay)"
                      >{{ replay.isInputShow ? '收起' : '回复' }}</span
                    >
                    <span style="color: #777888">{{
                      replay.created_time
                    }}</span>
                  </div>
                  <div class="commentInput" v-if="replay.isInputShow">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4 }"
                      :placeholder="'回复' + replay.fromuser"
                      v-model="replay.inputComment"
                      :rows="4"
                    >
                    </el-input>
                    <el-button
                      class="commentBtn"
                      type="primary"
                      round
                      size="mini"
                      :disabled="replay.inputComment == ''"
                      @click="answerComment({ replay, comment })"
                      >评论</el-button
                    >
                  </div>
                </div>
              </div>
              <div
                class="deleteC"
                v-if="$store.state.user_level >= replay.user.user_level"
              >
                <el-popconfirm
                  title="确定删除吗？"
                  @confirm="deleteComment({ replay })"
                >
                  <i class="el-icon-circle-close" slot="reference"></i>
                </el-popconfirm>
              </div>
            </div>
          </div>
          <div
            class="second-look-more"
            v-if="!comment.isShowAll && comment.Comments.length > 1"
            @click="showAllComments(comment)"
          >
            查看全部 {{ comment.Comments.length }} 条回复
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTopicById, postComment, delComment } from '../api/topic';
export default {
  data() {
    return {
      topic_id: '',
      topicInfo: {},
      commentInfo: '',
      comments: [],
      commentsNum: 0,
    };
  },
  methods: {
    async getTopicInfo() {
      const res = await getTopicById(this.topic_id);
      if (res.code == 200) {
        this.topicInfo = res.data;
        //长度
        var length = 0;
        // 添加对应的Input相关值
        this.comments = [...res.data.comments].map((item) => {
          length += 1;

          item['Comments'].map((item2) => {
            length += 1;
            this.$set(item2, 'isInputShow', false);
            this.$set(item2, 'inputComment', '');
            return item2;
          });
          this.$set(item, 'isInputShow', false);
          this.$set(item, 'inputComment', '');
          this.$set(item, 'showNum', 1);
          this.$set(item, 'isShowAll', false);
          return item;
        });
        // 评论总数
        this.commentsNum = length;
      }
    },
    toUserHome(user_id) {
      this.$router.push({
        name: 'user',
        params: {
          user_id,
        },
      });
    },
    letInputShow(item) {
      item.inputComment = '';
      item.isInputShow = !item.isInputShow;
    },
    async postComment() {
      if (!this.$store.state.authorization) {
        this.$message.error('请先登录');
        return this.$router.push('/login');
      }
      if (this.commentInfo && this.commentInfo != '') {
        const res = await postComment({
          topic_id: this.topic_id,
          content: this.commentInfo,
        });
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '评论成功',
          });
          this.getTopicInfo();
          this.commentInfo = '';
        }
      }
    },
    async answerComment({ replay, comment }) {
      if (!this.$store.state.authorization) {
        this.$message.error('请先登录');
        return this.$router.push('/login');
      }
      const commentObj = {};
      if (replay) {
        commentObj.touser = replay.fromuser;
        commentObj.toId = replay.fromId;
        commentObj.content = replay.inputComment;
      } else {
        commentObj.touser = comment.fromuser;
        commentObj.toId = comment.fromId;
        commentObj.content = comment.inputComment;
      }
      commentObj.topic_id = this.topic_id;
      commentObj.replayId = comment.id;
      if (commentObj.content && commentObj.content != '') {
        const res = await postComment(commentObj);
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '追评成功',
          });
          this.getTopicInfo();
          commentObj.inputComment = '';
        }
      }
    },
    async deleteComment({ replay, comment }) {
      var comment_id;
      if (replay) {
        comment_id = replay.id;
      } else {
        comment_id = comment.id;
      }
      const res = await delComment(comment_id);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '删除成功',
        });
        this.getTopicInfo();
      }
    },
    showAllComments(comment) {
      comment.showNum = comment.Comments.length;
      comment.isShowAll = true;
    },
  },
  created() {
    this.topic_id = this.$route.params.topic_id;
    this.getTopicInfo();
  },
};
</script>

<style lang="less" scoped>
.blog-content-box {
  position: relative;
  padding: 0 24px 16px;
  background: #fff;
  margin: auto;
  width: 1010px;
  margin-top: 20px;
  margin-bottom: 5px;
  .article-header-box {
    border-bottom: 1px solid #f5f6f7;
    padding-top: 8px;
    z-index: 9;
    background-color: #fff;
    .article-title-box {
      margin-bottom: 8px;
      h1 {
        font-size: 28px;
        word-wrap: break-word;
        color: #222226;
        font-weight: 600;
        margin: 0;
        word-break: break-all;
      }
    }
    .article-info-box {
      position: relative;
      background: #f8f8f8;
      border-radius: 4px;
      display: flex;
      .article-type-img {
        width: 36px;
        height: 32px;
        margin-right: 12px;
        line-height: 32px;
      }
      .bar-content {
        .follow-nickName {
          color: #555666;
          margin-right: 20px;
          vertical-align: top;
          line-height: 32px;
          font-size: 14px;
          cursor: pointer;
          &:hover {
            color: #fc5531;
          }
        }
        .time {
          color: #999aaa;
          margin-right: 20px;
          line-height: 36px;
          font-size: 14px;
        }
        .article-read-img {
          width: 16px;
          height: 16px;
          margin-top: 4px;
        }
        .read-count {
          margin-left: 10px;
        }
      }
    }
  }
  .baidu_pl {
    position: relative;
    padding-top: 16px;
    .topic {
      font-size: 18px;
    }
    .content {
      margin-top: 10px;
      padding: 10px;
      background-color: #ddd;
      width: 100%;
      box-sizing: border-box;
      /deep/ img {
        max-width: 100% !important;
      }
    }
  }
}
.comment-box {
  width: 1010px;
  margin: auto;
  border-radius: 2px;
  background: #fff;
  margin-bottom: 8px;
  padding: 16px 24px 24px 24px;
  .comment-title {
    font-size: 18px;
    font-weight: 600;
    color: #222226;
    line-height: 32px;
    margin-bottom: 8px;
    span {
      margin-left: 4px;
    }
  }
  .comment-edit-box {
    display: flex;
    .user-img {
      margin-right: 8px;
      padding-top: 9px;
      img {
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid #e8e8ed;
        cursor: pointer;
      }
    }
    .commentInput {
      width: 100%;
      position: relative;
      border-radius: 8px;
      padding: 8px 0;
      .commentBtn {
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
    }
  }
  .comment-list-box {
    padding-top: 16px;
    .comment-list-item {
      display: flex;
      position: relative;
      &:hover .deleteC i {
        display: block;
      }
      .img_box {
        cursor: pointer;
        display: block;
        padding-top: 15px;
        height: 48px;
        img {
          display: block;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          border: 1px solid #e8e8ed;
        }
      }
      .right_box {
        border-top: 1px solid #e8e8ed;
        padding-top: 15px;
        padding-bottom: 16px;
        width: 100%;
        margin-left: 8px;

        .new-info-box {
          width: 100%;
          .comment_top {
            justify-content: space-between;
            margin-bottom: 4px;
            line-height: 20px;
            font-size: 14px;
            span {
              display: inline-block;
              font-weight: 500;
              color: #222226;
              margin-right: 4px;
              font-size: 14px;
            }
          }
          .comment-center {
            .new-comment {
              font-size: 15px;
              color: #222226;
              line-height: 22px;
              word-break: break-all;
              margin-bottom: 4px;
            }
          }
          .opt-comment {
            line-height: 20px;
            span {
              font-size: 14px;
              color: #222226;
              margin-right: 10px;
            }
          }
          .commentInput {
            width: 100%;
            position: relative;
            border-radius: 8px;
            padding: 8px 0;
            .commentBtn {
              position: absolute;
              right: 10px;
              bottom: 10px;
            }
          }
        }
      }
      .deleteC {
        position: absolute;
        right: 5px;
        top: 48px;
        i {
          display: none;
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
    }
    .replay-box {
      padding-bottom: 10px;
      padding-left: 32px;
      .comment-list-item {
        display: flex;
        width: 100%;
        &:hover .deleteC i {
          display: block;
        }
        .img_box {
          cursor: pointer;
          height: 24px;
          img {
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
          }
        }
        .right-box {
          width: 100%;
          margin-left: 8px;
          .comment-top {
            justify-content: space-between;
            margin-bottom: 4px;
            line-height: 20px;
            font-size: 14px;
            .user-box {
              .username {
                color: #4f4f4f;
              }
              .text {
                color: #777888;
                margin: 0 6px;
              }
              .nickName {
                font-weight: 500;
                color: #222226;
              }
            }
          }
          .comment-center {
            .new-comment {
              font-size: 15px;
              color: #222226;
              line-height: 22px;
              word-break: break-all;
              margin-bottom: 4px;
            }
          }
          .opt-comment {
            line-height: 20px;
            span {
              font-size: 14px;
              color: #222226;
              margin-right: 10px;
            }
          }
          .commentInput {
            width: 100%;
            position: relative;
            border-radius: 8px;
            padding: 8px 0;
            .commentBtn {
              position: absolute;
              right: 10px;
              bottom: 10px;
            }
          }
        }
        .deleteC {
          display: flex;
          align-items: center;
          i {
            display: none;
            cursor: pointer;
            &:hover {
              color: red;
            }
          }
        }
      }
    }
    .second-look-more {
      display: inline-block;
      font-size: 14px;
      color: #777888;
      line-height: 20px;
      margin-bottom: 10px;
      margin-left: 32px;
      position: relative;
      top: -6px;
      left: 32px;
      cursor: pointer;
    }
  }
}
</style>
